<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- 一般数据会通过props进行传递   模板标签会通过插槽进行传递 -->
    <div id="app">
        <!-- 作用域插槽  接收子组件传来的数据  决定谁显示 -->
        <my-user> 
            <!-- 显示 firstame -->
            <!-- <template v-slot:default="slotProps">
                {{slotProps.userinfo.firstame}}
            </template> -->

             <!-- 显示 lastname -->
            <template v-slot:default="slotProps">
                {{slotProps.aaa.lastname}}
            </template>
        </my-user>
    </div>

    <!-- CCC 作用域插槽 -->
    <template id="user">
        <div>
            <h3>用户信息</h3>
            <p>user --- user --- user</p>
            <hr>
            <!-- 插槽内容 先接收所有由子组件传来的数据,在由父组件决定谁来显示 -->
            <p>
                <slot v-bind:aaa="userinfo">
                    {{userinfo.username}}
                 </slot>
            </p>
        </div>
    </template>
  
</body>

<script>
    Vue.component("myUser", {
        template: "#user",
        data () {
            return {
                userinfo:{ // 是 user 的数据信息 , 反向传给父组件,由父组件决定显示谁
                    username:"fafafa",
                    firstame:"tttttt",
                    lastname:"zzzzzzz "
                }
            }
        }
    })


    const vm = new Vue({
        data: {
            title: "组件 插槽"
        },
        mounted() {
            document.querySelectorAll("title")[0].innerHTML = this.title
        }

    }).$mount("#app")
</script>

</html>